import { PageProps } from "@/interfaces/app.interface"
import React, { useEffect, useCallback, useState, useRef } from "react"
import Head from '../components/head'
import Foot from '../components/foot'
import style from "./index.less"
import { getNew, getMenu, getDefault } from '@/api'
const newsPage = (props: PageProps) => {

    let [info, setInfo] = useState<obj>({})
    let [per, setPer] = useState([])
    let [show, setShow] = useState(true)
    let [nav, setNav] = useState(3)
    let exhibitionId = props.location.query.i as string
    const back = () => {
        let suffix = ''
        if (exhibitionId) {
            suffix = '?i=' + exhibitionId
        }
        props.history.push('/news.html' + suffix)
    }

    const link = (url: string) => () => {
        props.history.push(url)
    }
    const getData = useCallback(
        (exhibitionId) => {
            getMenu({ exhibitionId }).then(res => {
                let nav = 0
                if (res[7].isDel == 0) nav++
                if (res[4].isDel == 0) nav++
                if (res[5].isDel === 0) {
                    nav++
                    setNav(nav)
                    setPer(res)
                    setShow(false)
                    let { id } = props.location.query
                    getNew({ id }).then(res => {
                        setInfo(res.entities[0])
                    })
                }
            })
        },
        [],
    )
    useEffect(() => {
        if (exhibitionId) {
            getData(exhibitionId)
        } else {
            getDefault().then(getData)
        }
    }, [props.location.query.id])

    return show ? null : <>
        <Head status={nav} per={per} id={exhibitionId} />
        <div className={style.banner}>
            <img src={require('@/assets/img/ban.png')} alt="" />
            <div>新闻资讯</div>
        </div>
        <div className={style.nav}>
            <div className="wrap flex-start">
                <div onClick={link('/')} className={style.cur}>首页</div>
                <span> &gt; </span>
                <div onClick={link('/news.html')} className={style.cur}>新闻资讯</div>
                <span> &gt; </span>
                <div className={style.on}>详情</div>
            </div>
        </div>
        {info.id ? <div className="wrap">
            <div className={style.detail}>
                <div className={style.top}>
                    <div className={style.title}>{info.title}</div>
                    <div className={style.time}>{info.publishTime.slice(0, 10)}</div>
                </div>
                <div className={style.desc} dangerouslySetInnerHTML={{ __html: info.content }}></div>
                <div className={style.back} onClick={back}>返回列表</div>
            </div>
        </div> : null}

        <Foot />
    </>

}


export default newsPage



